:root{
  --bg: #fff;
  --nav: #F9FBFE;
  --b1: rgb(229 231 235 / 0.8);
  --md-text: rgba(60,60,60,.95);
  --tree-bg: #f4f5f6;
  --md-code-bg: #2a2929;
  --md-bg-mute: rgba(0, 0, 0, .07);
  --md-high: rgba(141, 141, 141, 0.5);
  --md-border: #b9b9b9;
}
.dark{
  --bg: #222222;
  --nav: #222222;
  --b1: rgb(229 231 235 / 0.1);
  --md-text: rgba(255, 255, 255, 0.9);
  --tree-bg: #1E1E1E;
  --md-code-bg: #1c1c1c;
  --md-bg-mute: rgba(255, 255, 255, .1);
  --md-high: #6b7280;
  --md-border: #3f3f46;
}

.code-bg{
  background: var(--md-code-bg);
}
.def-bg{
  background: var(--bg);
}
.tree-bg{
  background: var(--tree-bg);
}
.nav{
  background: var(--nav);
}
.b1{
  border-color: var(--b1);
}
.b2{
  @apply border-gray-200 dark:border-gray-200/10;
}
.md-text{
  color: var(--md-text);
}
html{
  background: var(--bg);
}

.input{
  @apply outline-none dark:text-gray-300 text-gray-600 text-sm dark:bg-zinc-900 bg-white
  h-7 rounded px-2 border dark:border-zinc-700 border-gray-500/50 dark:focus:border-zinc-500 focus:border-gray-500/80 duration-200;
}

.high-block{
  animation: high .3s .1s forwards;
}

@keyframes high {
  from {
    background: rgba(6,182,212, 0);
  }
  to{
    background: rgba(6,182,212, .5);
  }
}

.modal-panel{
  @extend .modal-border;
  @apply dark:bg-zinc-900 bg-white rounded-lg border shadow-lg shadow-gray-400/30 dark:shadow-gray-600/5;
}

.modal-border{
  @apply dark:border-gray-200/20 border-gray-300;
}

.float-bar-icon{
  @apply dark:hover:text-gray-200 dark:hover:bg-gray-200/10 hover:bg-gray-200/50 hover:text-gray-600 cursor-default;
}

.float-color-icon{
  @apply w-5 h-5 rounded border border-white/10 hover:border-white/50;
}
